<style lang="less" scoped>
    a{
      display: block;
      color: inherit;
      text-decoration: none;
          width: 100%;
    height: 100%;
    }
    .header{
          display: flex;
          position: fixed;
          top: 0;
          background: #fff;
          z-index: 10;
          width: 100%;
        .search{
            line-height:.56rem;
            font-size:.24rem;
            margin:.20rem;
            background:#eeeef0;
            color:#999;
            border-radius: .1rem;
            flex:1;
            .search-ico{
              height:.22rem;
              width:.22rem;
              float: left;
              margin:.17rem .12rem .17rem .20rem;
              background:url("../assets/images/sousuo@3x.png");
              background-size:100%;
            }
        }
        .header-ico{
            float:left;
            width:.48rem;
            height:.48rem;
            margin-top: .24rem;
            margin-right: .20rem;
            background:url("../assets/images/xiaoxizhongxin@3x.png") no-repeat center;
              background-size:100%;
        }
    }
    .banner{
            margin-top:.96rem;
            width:100%;
            height:3.7rem;
            img{
              width:100%;
              height:100%;
            }
        }
    .banner-btn{
            display: flex;
    height: 1rem;
    margin: .36rem 0;
    width: 100%;
    padding: 0 .35rem;
    box-sizing: border-box;
        .btn-item{
            flex:1;
            text-align:center;
            line-height:.50rem;
            color:#555;
            font-size:.22rem;
            i{
                  width: .48rem;
                  height: .48rem;
                  display: block;
                  margin: 0 auto;
                  margin-bottom:.1rem;
            }
        }
/*        .img-ico(@url){
              background:url(@url) no-repeat center;
              background-size:100%;
        }*/

        .myLoop(@n) when (@n>0){  
              .btn-item:nth-child(@{n}) i {
                 background:url("../assets/images/btn-@{n}.png") no-repeat center;
                 background-size:contain;
              }
              .myLoop((@n - 1)); 
        }         
        .myLoop(5); // launch the loop
    }    
    .top-1-img{
      width:100%;
      height:3.7rem;
      position: relative;
    }
    .top-1-img:before{
      content: "";
      width:.38rem;
      height:.24rem;
      position: absolute;
      display: block;
      left:.20rem;
      bottom:-0.01rem;
      background:url("../assets/images/triangle.png") no-repeat center;
      background-size: 100%;
      z-index: 10;
    }
    .top-1-box,.top-1-baner{
      width:100%;
      display: flex;
      margin-bottom: .25rem;
          margin-top: .1rem;
      div{
        height:2.1rem;
        flex: 1;
      }
      div:nth-child(1){
        margin-right: .2rem;
      }
    }
    img{
        width:100%;
        height:100%;
      }
    .common-box{
      display: flex;
      justify-content: space-around;
      margin: 0 .11rem;
      >div{
        width: 2.22rem;
        text-align: center;
        img{
          height: 2.22rem;
          margin-bottom: .14rem;
        }
        span{
          display: block;
          line-height: .36rem;
        }
        .price{
            color: #f8605f;
            font-size: .24rem;
            margin-bottom: .1rem;
            line-height: .5rem;
        }
        .name{
          color: #868484;
          font-size: .22rem;
          overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
        }
        .more{
          color: #f8605f;
            font-size: .22rem;
            line-height: .70rem;
        }
      }
    }
    .product-box{
      display: inline-block;
      margin: 0 .1rem;
      margin-bottom: 1rem;
      text-align: center;
      >div{
        width: 3.45rem;
        float: left;
        margin: .1rem;
        img{
          width: 100%;
          height: 3.45rem;
        }
        div{
          padding-top:.1rem;
          background: #f8605f;
        }
        span{
          display: block;
          line-height: .36rem;
        }
        .price{
            color: #fff;
            font-size: .24rem;
            margin-bottom: .1rem;
            line-height: .5rem;
        }
        .name{
          color: #fff;
          font-size: .22rem;
        }
      }
    }
    .like{
      display: flex;
      width: 100%;
      margin: .20rem 0;
      .line{
        height: 1px;
        flex:1;
        background: #f8605f;
        margin: .18rem 0;
      }
      .line:nth-child(1){
        margin-left:.71rem;
      }
      .line:nth-child(3){
        margin-right:.71rem;
      }
      .span{
        color: #f8605f;
        font-size: .24rem;
        line-height: .37rem;
        text-align: center;
        width: 1.46rem;
        float: left;
      }
    }
    .bottom-bar{
      display: flex;
      border-top: 0.01rem solid #cecece;
      position: fixed;
      bottom: 0;
      width: 100%;
      box-sizing: border-box;
      background: #fff;
      text-align: center;
      padding: 0 .05rem;
      padding-top: .1rem;
      z-index: 10;
      >div{
        flex:1;
        i{
              width: .48rem;
              display: block;
              height: .48rem;
              margin: 0 auto;
        }

        span{
          margin-top: .1rem;
    margin-bottom: .05rem;
    font-size: .22rem;
    color: #555555;
    display: block;
        }
        .select{
          color: #f8605f;
        }
      }
    }
    .bar(@n) when (@n>0){  
              .bar-item:nth-child(@{n}) i {
                 background:url("../assets/images/bar-@{n}.png") no-repeat center;
                 background-size:contain;
              }
              .bar((@n - 1)); 
        }         
        .bar(5);
     .se(@n) when (@n>0){  
              #select-img-@{n}{
                 background:url("../assets/images/bar-1-@{n}.png") no-repeat center;
                 background-size:contain;
              }
              .se((@n - 1)); 
        }         
        .se(5);
      .go-top{
        position: fixed;
        width: .8rem;
        height: .8rem;
        bottom: 2rem;
        right:.2rem;
        background: url('../assets/images/top.png') no-repeat center;
        background-size: 100%;
        border-radius: 50%;
      }
      .add-img{
        height: 1.5rem;
        width: 100%;
        img{
          width: 100%;
          height: 100%;
        }
      }
</style>
<template>
    <div id="index">
        <div class='header'>
            <div class='search'>
                <a href="https://pfmarket.youzan.com/market/resultsearch/index?keyword=+&kdt_id=0&biz=10000268_10000476&search_type=goods&m_alias=3no1cok9ra33r">
                <i class='search-ico'></i>
                搜索药品
                </a>
            </div>
            <div class='header-ico'>
                <a href="https://h5.youzan.com/v2/buyer/auth/login?redirect_uri=http%3A%2F%2Fpfmarket.youzan.com%2Ftrade%2Frecord%2Fgoodsview%3Fm_alias%3D3no1cok9ra33r%26sf%3Dwx_sm"></a>
            </div>
        </div>
        <div class='banner'>
            <swipe :auto="4000">
                <template v-for='item in type["TYPE1"]'>
                     <swipe-item>
                     <a @click='go_a(item.URL)'>
                     <img :src="item.PIC_PATH"/>
                     </a>
                     </swipe-item>
                </template>

            </swipe>
        </div>
        <div class='banner-btn'>
            <div class='btn-item'>
            <a href="https://pfmarket.youzan.com/feature/list/index?vid=776&m_alias=3no1cok9ra33r">
                <i></i>
                天天特价
            </a>    
            </div>
            <div class='btn-item'>
            <a href="https://pfmarket.youzan.com/feature/list/index?vid=777&m_alias=3no1cok9ra33r">
                <i></i>
                买赠专区
            </a>    
            </div>
            <div class='btn-item'>
              <a href="https://pfmarket.youzan.com/feature/list/index?vid=779&m_alias=3no1cok9ra33r ">
                <i></i>
                凑单专区
              </a>
            </div>
            <div class='btn-item'>
              <a href="https://pfmarket.youzan.com/feature/list/index?vid=778&m_alias=3no1cok9ra33r">
                <i></i>
                开店必备
              </a>  
            </div>
            <div class='btn-item'>
              <a href="https://pfmarket.youzan.com/feature/list/index?vid=784&m_alias=3no1cok9ra33r">
                <i></i>
                周销榜单
                </a>
            </div>
        </div>
        <a v-if='type4!=""' class='add-img' @click='go_a(type4.URL)'> 
          <img :src="type4.PIC_PATH">
        </a>

        <div class='body-top-1'>
              <div class='top-1-baner'>
                <a  @click='go_page(1)'>
                <img  src='../assets/images/pinpaijihedi.png' />
                </a>
              </div>
              <div class='top-1-box'>
                  <div @click='go_page(2)'>
                    <img src='../assets/images/renqishangpin.png' />
                  </div>
                  <div @click='go_page(3)'>
                    <img src='../assets/images/xinpinshoufa.png' />
                  </div>
              </div>
        </div>
        <div class='like'>
            <div class='line'></div>
            <div class='span'>
              分类专区
            </div>
            <div class='line'></div>
        </div>
        <div class='body-common' v-for='(item,index) in type["TYPE3"]'>
            <a @click='go_a(item.URL)'>
            <div class='top-1-img'>
                <img :src='item.PIC_PATH' />
              </div>
            </a>  
            <div class='common-box'>
                <div v-for='good in item.goods'>
                  <a @click='go_a(good["URL"])'>
                  <img :src="good.PIC_PATH" />
                   <span class='name'>{{good.NAME}}</span>
                  <span class='price'>￥{{good.PRICE}}</span>
                  </a>
                </div>
                <div>
                  <a :href='url_list[index]'>
                  <img src="../assets/images/more.png" />
                   <span class='more'>点击查看更多</span>
                  </a>
                </div>
            </div>  
        </div>
        <div class='like'>
            <div class='line'></div>
            <div class='span'>
              猜你喜欢
            </div>
            <div class='line'></div>
        </div>
        <div class='product-box' v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
            infinite-scroll-distance="10">
            <div v-for='item in goods' >
                <a @click='go_a(item.URL)'>
                <img :src="item.PIC_PATH">
                <div>
                  <span class='name'>{{item.NAME}}</span>
                  <span class='price'>￥{{item.PRICE}}</span>
                </div>
                </a>
            </div>
            
        </div>
        <div class='bottom-bar'>
          <div class='bar-item'>
            <i :id="[index==1?'select-img-1':'']"></i>
            <span :class="[index==1?'select':'']">首页</span>
          </div>
          <div class='bar-item'>
           <a href="https://pfmarket.youzan.com/market/category?m_alias=3no1cok9ra33r&sf=wx_sm">
            <i></i>
            <span>分类</span>
            </a>
          </div>
          <div class='bar-item'>
          <a href="https://h5.youzan.com/v2/im?c=ls&v=2&redirect_count=1">
            <i></i>
            <span>信息</span>
            </a>
          </div>
          <div class='bar-item'>
          <a href="https://pfmarket.youzan.com/trade/cart/index?m_alias=3no1cok9ra33r">
            <i></i>
            <span>购物车</span>
            </a>
          </div>
          <div class='bar-item'>
          <a href="https://pfmarket.youzan.com/user/settings/index?m_alias=3no1cok9ra33r">
            <i></i>
            <span>我的</span>
            </a>
          </div>
        </div>
        <div class='go-top' @click='run_top' v-show='go_top'>
          
        </div>
    </div>
</template>
<script>
    import {Swipe, SwipeItem} from 'mint-ui'
    export default{
        data(){
            return {
               index:1,
               goods:[1,2,3,4],
               tag:0,
               go_top:false,
               type:"",
               data:[],
               url_list:["https://pfmarket.youzan.com/market/list/index?biz=10000268_10000682&m_alias=3no1cok9ra33r",
               "https://pfmarket.youzan.com/market/list/index?biz=10000268_10000683&m_alias=3no1cok9ra33r",
               "https://pfmarket.youzan.com/market/list/index?biz=10000268_10000684&m_alias=3no1cok9ra33r",
               "https://pfmarket.youzan.com/market/list/index?biz=10000268_10000685&m_alias=3no1cok9ra33r",
               "https://pfmarket.youzan.com/market/list/index?biz=10000268_10000687&m_alias=3no1cok9ra33r&redirect_count=1"
               ],
               type4:''
            }
        },
        created(){
          var that = this;
          this.$ajax.post(URL+"/index.php/Index/GetModule", this.$qs.stringify({
                page:1
            })).then(res => { 
                that.type = res.data.data;
                that.type4 = res.data.data.TYPE4[0]?res.data.data.TYPE4[0]:"";
                this.$ajax.post(URL+"/index.php/Index/GetGoods",this.$qs.stringify({
                page:1
            })).then(res => { 
                  that.data = res.data.data.TYPE2;
                  that.goods = that.data;
                  var length = that.type.TYPE3.length;
                  for(var i=0,len=length;i<len;i++){
                    that.type.TYPE3[i].goods = [];
                  }
                  var num = 0;
                  var rexiao = res.data.data.TYPE1;
                  for(var i=0,len =rexiao.length;i<len;i++){
                      if(i!=0&&i%2==0){
                          num++;
                          that.type.TYPE3[num].goods.push(rexiao[i]);
                      }else{
                        that.type.TYPE3[num].goods.push(rexiao[i]);
                      }
                  }
            })
          })
        },
        filters: {
            
        },
        mounted(){
            window.addEventListener('scroll', this.scroll)
        },
        components:{
          swipe:Swipe,
          swipeItem:SwipeItem,
        },
        methods:{
          scroll(){
              this.scroll = document.body.scrollTop;
              if(this.scroll>((document.getElementById('index').offsetHeight)/3)){
                this.go_top = true;
              }else{
                this.go_top = false;
              }
          },
		  go_a(url){
  			var test = /#\/active\/(\d)/;
  			if(test.test(url)){
  				var id = test.exec(url)[1];
  				this.$router.push('/active/'+id);
  			}else{
  				url = url!=""?url:"javascript:void(0)"
  				window.location.href = url;
  			}
		  },
          loadMore(){
          },
          run_top(){
            document.body.scrollTop= 0;
          },
          go_page(id){
            this.$router.push('/active/'+id);
          }
        }
    }
</script>
